<template lang="pug">
el-dialog(:title='$t("evidences.title")' :visible.sync='showDlg')
  el-form(ref='eviDataForm' :rules='rules' :model='newEvi' label-position='left' label-width='100px' style='width: 500px; margin-left:50px;')
    el-form-item(:label="$t('evidences.eviNo')" prop='evidenceNo')
      el-input(v-model='newEvi.evidenceNo')
    el-form-item(:label="$t('evidences.name')" prop='evidenceType')
      el-select.filter-item(v-model='newEvi.evidenceType' :placeholder="$t('evidences.eviTypeTips')")
        el-option(v-for='item in eviTypeOptions' :key='item.key' :label='item.display_name' :value='item.key')
    el-form-item(v-if='newEvi.evidenceType=="VIDEO"' prop="video_uri" style="margin-bottom: 30px;")
      Upload(
        @on-upload-file='onUploadFile'
        v-model="newEvi.video_uri")
    el-form-item(v-else prop="video_uri" style="margin-bottom: 30px;")
      el-input(
        v-model='newEvi.description'
        :autosize='{ minRows: 4, maxRows: 8}'
        type='textarea'
        placeholder='请输入描述信息')
    el-form-item(:label="$t('evidences.description')")
      el-input(
        v-model='newEvi.description'
        :autosize='{ minRows: 4, maxRows: 8}'
        type='textarea'
        placeholder='请输入描述信息')
    el-checkbox(v-model="newEvi.autoParse") {{$t('evidences.autoParse')}}
  .dialog-footer(slot='footer')
    el-button(@click="canceld()")
      | {{ $t('evidences.cancel') }}
    el-button(type='primary' @click="addEvidence()")
      | {{ $t('evidences.confirm') }}
</template>

<script>
import ElDragSelect from '@/components/DragSelect' // base on element-ui
import Upload from '@/components/Upload/SingleVideo'
import { addEvidence } from '@/api/cases'

export default {
  name: 'AddEvidenceDlg',
  components: { ElDragSelect, Upload },
  props: {
    isShowDlg: {
      type: Boolean,
      default: true
    },
    caseId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showDlg: this.isShowDlg,
      newEvi: {
        evidenceType: 'VIDEO',
        savePath: '',
        autoParse: true,
        evidenceNo: '',
        evidenceName: '',
        caseId: '',
        description: ''
      },
      eviTypeOptions: [
        { key: 'HTML', display_name: '网页' },
        { key: 'VIDEO', display_name: '视频' }
      ],
      inquisitorValue: ['李寻欢', '叶开', '叮当', '傅红雪'],
      inquisitors: [
        { value: '李寻欢', label: '李寻欢' },
        { value: '叶开', label: '叶开' },
        { value: '叮当', label: '叮当' },
        { value: '傅红雪', label: '傅红雪' }
      ],
      rules: {
        eviName: [{ required: true, message: '请输入证据名称', trigger: 'blur' }],
        evidenceNo: [{ required: true, message: '请输入证据编号', trigger: 'blur' }],
        evidenceType: [{ required: true, message: '请选择一个证据类型', trigger: 'change' }]
      }
    }
  },
  watch: {
    isShowDlg(val) {
      this.showDlg = val
    },
    showDlg(val) {
      this.$emit('on-result-change', val)
    }
  },
  created() {
    this.newEvi.caseId = this.caseId
    console.log(this.newEvi)
  },
  methods: {
    canceld() {
      this.$emit('on-add-evidence', 'canceld')
    },
    childOperation(value) {
      this.$emit('child-operation', value)
      this.$nextTick(() => {
        this.$refs['eviDataForm'].clearValidate()
      })
    },
    addEvidence() {
      this.$refs['eviDataForm'].validate((valid) => {
        if (valid) {
          addEvidence(this.newEvi).then(() => {
            this.$emit('on-add-evidence')
            this.$notify({
              title: '成功',
              message: '添加证据成功',
              type: 'success',
              duration: 2000
            })
            this.$nextTick(() => {
              this.$refs['eviDataForm'].clearValidate()
            })
          })
        }
      })
    },
    onUploadFile(val) {
      this.newEvi.evidenceName = val.name
      this.newEvi.savePath = val.savePath
    }
  }
}
</script>

<style lang="scss" scoped>
.dlg {
  min-width: 860px;
}
</style>
